<div class="align-items-center container d-flex h-100 justify-content-center">
  <div class="row w-100">
    <div class="col">
      <div class="align-items-center d-flex flex-column">
        <gf-membership-card
          [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
          [hasPermissionToCreateApiKey]="hasPermissionToCreateApiKey"
          [hover3d]="true"
          [name]="user?.subscription?.type"
          (generateApiKeyClicked)="onGenerateApiKey()"
        />
        @if (user?.subscription?.type === 'Basic') {
          <div class="d-flex flex-column mt-5">
            @if (
              hasPermissionForSubscription && hasPermissionToUpdateUserSettings
            ) {
              <button color="primary" mat-flat-button (click)="onCheckout()">
                @if (user.subscription.offer.isRenewal) {
                  <ng-container i18n>Renew Plan</ng-container>
                } @else {
                  <ng-container i18n>Upgrade Plan</ng-container>
                }
              </button>
              @if (price) {
                <div class="mt-1 text-center">
                  @if (coupon) {
                    <del class="text-muted"
                      >{{ baseCurrency }}&nbsp;{{ price }}</del
                    >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon }}
                  } @else {
                    {{ baseCurrency }}&nbsp;{{ price }}
                  }
                  &nbsp;<span i18n>per year</span>
                </div>
              }
              @if (durationExtension) {
                <div class="mt-1 text-center">
                  <div
                    class="badge badge-pill badge-warning font-weight-normal px-2 py-1"
                  >
                    <strong i18n>Limited Offer!</strong>
                    <ng-container>&nbsp;</ng-container>
                    <ng-container i18n
                      >Get {{ durationExtension }} extra</ng-container
                    >
                  </div>
                </div>
              }
            }
            <div class="align-items-center d-flex justify-content-center mt-4">
              @if (!user?.subscription?.expiresAt) {
                <a class="mx-1" mat-stroked-button [href]="trySubscriptionMail"
                  ><span i18n>Try Premium</span>
                  <gf-premium-indicator
                    class="d-inline-block ml-1"
                    [enableLink]="false"
                  />
                </a>
              }
              @if (hasPermissionToUpdateUserSettings) {
                <a
                  class="mx-1"
                  i18n
                  mat-stroked-button
                  [routerLink]=""
                  (click)="onRedeemCoupon()"
                  >Redeem Coupon</a
                >
              }
            </div>
          </div>
        } @else {
          <div class="mt-3 text-muted">
            <small i18n>No auto-renewal on membership.</small>
          </div>
        }
      </div>
    </div>
  </div>
</div>
